<!--文旅地产首页-->
<template>
	<div>
		<common-header :tittle="tittle" :showmore="true" class="head"></common-header>
		<div class="page-content">
			<div class="box">
				<div class="nav">
					<img src="../../../assets/imgs/wenBrigade/bg-img3.png" alt="" />
				</div>

				<div class="msg">
					<div class="bt">
						<div class="start">
							<p>中信嘉丽泽</p>
							<i></i>
							<i></i>
							<i></i>
							<i></i>
						</div>
						<span class="price">15000元/m²</span>
					</div>

					<div class="adress">
						<p>楼盘地址：嵩明嘉丽泽湿地</p>
						<p>查看地图</p>
					</div>
					<p class="time">2018-12-28</p>
					<p class="mobile"><span>400-168-8937</span><i></i></p>

				</div>
			</div>
			<router-link to='/propertyDetails'>
				<span class="more"> 点击查看更多信息</span>
			</router-link>

		</div>

	</div>
</template>

<script>
	import commonHeader from 'common/common-header-transparent'
	export default {
		data() {
			return {
				tittle: '',
				start: [{
						type: 1
					}

				]

			}
		},
		created() {

		},
		methods: {

		},
		components: {
			commonHeader,

		},
		computed: {

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	@import "~styles/index.less";
	@import "~styles/variable.less";
	.hello {
		h1 {
			color: red;
			.fs(38);
		}
	}
	
	.header-box {
		background: none !important;
		color: @base-black-color !important;
		z-index:999;
	}
	
	.page-content {
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin-top: 0px;
		height: 100%;
		.box {
			height: 100%;
			width: 100%;
			.nav {
				height: 58%;
				img {
					height: 100%;
					width: 100%;
				}
			}
			.msg {
				width: calc(100% - 30px);
				height: 42%;
				display: block;
				background: @base-blue-color;
				padding: 0 15px;
				.bt {
					text-align: left;
					display: flex;
					justify-content: space-between;
					padding-top: 15px;
					border-bottom: 1px solid #68DDD7;
					padding-bottom: 10px;
					margin-bottom: 15px;
					.start {
						p {
							font-size: 20px;
							font-weight: bold;
							color: @tab-general-bg-color;
						}
						i {
							margin-top: 10px;
							display: inline-block;
							height: 10px;
							width: 10px;
							background: url('../../../assets/imgs/wenBrigade/star@2x.png');
							background-size: 100% 100%;
							margin-right: 7px;
						}
					}
					span {
						&.price {
							font-size: 18px;
							font-weight: 500;
							color: @tab-general-bg-color;
						}
					}
				}
				.adress {
					display: flex;
					justify-content: space-between;
					color: @tab-general-bg-color;
					p {
						font-size: 15px;
						&:last-child {
							position: relative;
							padding-right: 20px;
							&:after {
								position: absolute;
								content: '';
								width: 10px;
								height: 10px;
								background: url('../../../assets/imgs/wenBrigade/estate_checkmap@2x.png');
								background-size: 100% 100%;
								left: -15px;
								top: 4px;
								margin: auto;
							}
							&:before {
								position: absolute;
								content: '';
								width: 10px;
								height: 10px;
								background: url('../../../assets/imgs/wenBrigade/estate_more@2x.png');
								background-size: 100% 100%;
								right: -0px;
								top: 4px;
								margin: auto;
							}
						}
					}
				}
				.time {
					text-align: left;
					font-size: 15px;
					color: @tab-general-bg-color;
					margin: 10px 0;
				}
				.mobile {
					display: flex;
					justify-content: space-between;
					font-size: 15px;
					color: @tab-general-bg-color;
					font-weight: bold;
					position: relative;
					&:after {
						position: absolute;
						content: '';
						width: 20px;
						height: 20px;
						background: url('../../../assets/imgs/wenBrigade/estate_call@2x.png');
						background-size: 100% 100%;
						right: 0;
						top: 2px;
					}
				}
			}
		}
	}
	
	.more {
		position: fixed;
		bottom: 15px;
		color: #fff;
		font-size: 12px;
		text-align: center;
		left: 0;
		right: 0;
		margin: auto;
	}
</style>